<template>
  <div class="menu-wrapper">
    <company-dialog ref="officeDialog" @confirm="dialogConfirm" />
    <office-dialog ref="officeDialog" @confirm="officeConfirm"/>
    <el-form ref="memberForm" :model="form" :rules="rules" label-width="80px">
      <div
        style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px"
      >
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">修改企业信息</span>
      </div>
      <el-form-item label="企业编号" prop="code">
      <el-col :span="6">
        <el-input v-model="form.code" />
      </el-col>
    </el-form-item>
      <el-form-item label="企业名称" prop="name">
        <el-col :span="6">
          <el-input v-model="form.name" />
        </el-col>
      </el-form-item>
      <el-form-item label="企业分类" prop="companyCategoryName">
        <el-col :span="6">
          <el-input
            v-model="form.companyCategoryName"
            suffix-icon="el-icon-down"
            @focus="dialogShow"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="所属部门" prop="officeName">
        <el-col :span="6">
          <el-input v-model="officeName" suffix-icon="el-icon-arrow-down" @focus="officeShow"/>
        </el-col>
      </el-form-item>
      <el-form-item label="管理人员" prop="userId">
        <el-col :span="6">
          <el-select style="width: 100%" v-model="memberName"  :filter-method="remoteMethod" value-key="id" filterable placeholder="请选择"
                  @change="changMember" >
            <el-option
              v-for="item in memberList"
              :key="item.id"
              :label="item.name"
              :value="item">
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-col :span="6">
          <el-input v-model="form.mobile" />
        </el-col>
      </el-form-item>
      <el-form-item label="所在地"  style="width: 550px">
        <Distpicker @selected="onSelected" :province="district.province" :city="district.city"
                    :area="district.area"></Distpicker>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-col :span="6">
          <el-input v-model="form.address" />
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="clicked" @click="updateMember('memberForm')">完 成</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}
</style>
<script>
  import {list as memberList} from '@/api/member'
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import Distpicker from "@/components/Distpicker/Distpicker";
import { update, find } from "@/api/company";
import { checkUserExists } from "@/api/sysUser";
import md5 from "js-md5";
import CompanyDialog from "./dialog";
import OfficeDialog from '@/components/OfficeDialog'
export default {
  name: "company-edit",
  filters: {},
  components: {
    Distpicker,
    CompanyDialog,
    OfficeDialog
  },
  data() {
    return {
      memberName:'',
      officeName:'',
      memberList:[],
      clicked: false, // 按钮防双击
      district: { province: 350000, city: 350200, area: 350203 },
      form: {
        id: "",
        areaId: 0,
        areaName: "",
        code:'',
        officeId:'',
        name: "",
        memberId:'',
        mobile: "",
        address: "",
        companyCategoryId: "",
        companyCategoryName: ""
      },
      topName: "",
      dateName: "出生日期",
      optionsType: "性别",
      optionsForm: [
        { name: "男", value: 1 },
        { name: "女", value: 2 }
      ],
      rules: {
        name: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" }
        ],
        code: [
          { required: true, message: "请输入企业编号", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ]
      }
    };
  },
  created(){
      var _this = this;
    _this.getData()
    this.loadMember('')
  },
  watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
    $route (newVal, oldVal) {
        console.log(newVal);
      if (newVal.name=='company-edit' && newVal.query.id!=this.id) {
        this.getData()
      }
    }
  },
  methods: {
    remoteMethod(query){
      this.loadMember(query)
    },
    changMember(data){
      this.form.memberId=data.id
      this.memberName=data.name
    },
    //会员选择
    loadMember(query) {
      var _this = this
      let params = new URLSearchParams();
      params.append('name',query)
      memberList(params).then(response => {
        console.log(response);
        _this.memberList = response.data.data
      }).catch(error => {
        console.log('error!!')
      });
    },
    officeConfirm(val) {
      this.form.officeId = val.id;
      this.officeName = val.name
    },
    officeShow(){
      console.log('点击了')
      this.$refs.officeDialog.show()
    },
      getData(){
          this.form.id = this.$route.query.id;
          var _this = this;
          find(_this.form.id)
      .then(response => {
        console.log("请求返回的数据" + JSON.stringify(response));
        if (response.type == "success") {
          _this.form.memberId=response.data.company.memberId;
          _this.form.id = response.data.company.id;
          _this.form.officeId=response.data.company.officeId;
          _this.form.code=response.data.company.code;
          _this.memberName=response.data.memberName
          _this.officeName=response.data.officeName;
          _this.form.name = response.data.company.name;
          _this.form.areaId=response.data.company.areaId
          _this.form.areaName=response.data.company.areaName
          _this.form.phone = response.data.company.phone;
          _this.form.address = response.data.company.address;
          _this.form.mobile = response.data.company.mobile;
          _this.form.companyCategoryId =
            response.data.company.companyCategoryId;
          _this.form.companyCategoryName =
            response.data.company.companyCategoryName;
        } else {
          _this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
        }
      })
      .catch(error => {});
      },

    onSelected(val) {
      console.log(val);
      if (!utils.isNull(val.area) && !utils.isNull(val.area.code)) {
        this.form.areaId = val.area.code;
        this.form.areaName =
          val.province.value + val.city.value + val.area.value;
      }
      console.log(this.form.areaName);
    },
    dialogShow() {
      console.log("点击了");
      this.$refs.officeDialog.show();
    },
    dialogConfirm(val) {
      console.log("分类选择的数据--" + JSON.stringify(val));
      this.form.companyCategoryName = val.name;
      this.form.companyCategoryId = val.id;
    },
    updateMember(form) {
      const _this = this;
      this.$refs[form].validate(valid => {
        if (valid) {
          // 校验表单
          _this.clicked = true;
          update(_this.form)
            .then(response => {
              _this.clicked = false;
              if (response.type == "success") {
                let data = _this.formatList(response.data);
                console.log("修改完返回给列表的数据--" + JSON.stringify(data));
                EventBus.$emit("company-edit", data);
                _this.$store
                  .dispatch("tagsView/delView", _this.$route)
                  .then(({ visitedViews }) => {
                    _this.$router.push({
                      path: "/company/list",
                      query: { id: _this.form.id, companyName: _this.form.name}
                    });
                  }); // 关闭当前tab回到列表
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true
                });
              }
            })
            .catch(error => {
              _this.clicked = false;
            });
        } else {
          return false;
        }
      });
    },
    //过滤成日期
    formatDate2Day(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },

    //过滤到时间
    formatDate2Time(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },

    //过滤企业列表
    formatList(data) {
      data.createDate = this.formatDate2Day(data.createDate);
      data.modifyDate = this.formatDate2Time(data.modifyDate);
      data.rechangeDate = this.formatDate2Time(data.rechangeDate);
      return data;
    },

    memberTypeClick(val) {
      console.log(val);
      var _this = this;
      if (val == 0) {
        _this.dateName = "出生日期";
        _this.optionsType = "性别";
        _this.optionsForm = [
          { name: "男", value: 1 },
          { name: "女", value: 2 }
        ];
      } else {
        _this.dateName = "创建日期";
        _this.optionsType = "企业类型";
        _this.optionsForm = [
          { name: "企业", value: 1 },
          { name: "事业单位", value: 2 }
        ];
      }
    }
  }
};
</script>
